<script setup lang='ts'>
import ChannelNav from '@/components/ChanneNav.vue';
import ArticleList from '@/components/ArticleList.vue';
import { onMounted, ref } from 'vue';
import { getChannelAPI } from '@/api/channel';
import type { ChannelItem } from '@/types';

onMounted(() => {
    // 获取频道数据
    getChannel()
})
const channelList = ref<ChannelItem[]>([])
// 激活id
const activeId = ref(0)

const getChannel = async () => {
    const result = await getChannelAPI()
    channelList.value = result.channels // 赋值列表
    activeId.value = result.channels[0].id //把第一个频道的id作为激活的选项

}
const updateActiveId = (id:number)=>{
    activeId.value = id
}
</script>

<template>
    <!-- 频道 -->
    <ChannelNav :active-id="activeId" :channels="channelList" @update-active-id="activeId=$event"></ChannelNav>
    <!-- 列表 -->
    <ArticleList :active-id="activeId"></ArticleList>
    <!-- 二级路由容器 -->
     <div class="fix">
        <!-- 详情进入的页面 -->
         <router-view></router-view>
     </div>
    </template>

    <style scoped>
    .fix{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }
</style>